.modal-enter {
  opacity: 0.01;
  transform: translateY(20px);
}

.modal-enter.modal-enter-active {
  opacity: 1;
  transform: translateY(0);
}

.modal-exit {
  opacity: 1;
}

.modal-exit.modal-exit-active {
  opacity: 0.01;
  transform: translateY(10px);
}

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  z-index: 200;
  transition: .2s;
  transition-property: opacity, transform;

  .close {
    position: absolute;
    top: 10px;
    right: 10px;
    border: 0;
    outline: 0;
    padding: 10px;
    background: none;
    z-index: 10;
    color: #666;
    cursor: pointer;
    transition: color .3s;

    &:hover {
      color: #0cf;
    }

    .icon {
      font-size: 24px;
    }
  }
}
